<template>
  <div class="lettleSay">
      <Bgimg>聊天室</Bgimg>
      <Container :showUser="false">
          <div class="chart">
              <div class="chart-left">
                  <UserInfo />
                  <div class="chart-list">
                      <div class="tip">在线用户列表</div>
                      <template v-for="item in userQueue" :key="item.user.uid">
                          <div class="chart-list-item">
                            <el-avatar :src="item.user.hdportrait"></el-avatar>
                            <span class="chart-list-item-name">{{item.user.nickname}}</span>
                        </div>
                      </template>
                  </div>
              </div>
              <div class="chart-right">
                  <div class="chart-top">
                      <span>xxx聊天室</span>
                      <span>当前在线({{userCount}})人</span>
                  </div>
                  <div class="chart-wrap" ref="chartWrap">
                      <template v-for="item in charts" :key="item.id">
                          <div class="chart-item" :class="{'current-user':item.id === isLogin.uid}">
                          <div class="chart-user-avatar">
                              <el-avatar :src="item.chartUser.avatar"></el-avatar>
                          </div>
                          <div class="chart-msg">
                              <div class="chart-user-name">
                                  <span>{{ item.chartUser.name }}</span>
                              </div>
                              <div class="chart-user-msg">
                                  <span>{{ item.chartMsg }}</span>
                              </div>
                          </div>
                      </div>
                      </template>
                  </div>
                  <div class="chart-send">
                      <div class="chart-text">
                          <textarea v-model="chartMsg" @keydown.prevent.enter="chartSend" name="" id="" placeholder="请输入……" autofocus></textarea>
                      </div>
                      <div class="chart-send-btn">
                          <el-button type="primary" size="small" @click="chartSend">发送</el-button>
                      </div>
                  </div>
              </div>
          </div>
      </Container>
  </div>
</template>

<script>
import Bgimg from 'components/Bgimg.vue'
import UserInfo from 'components/UserInfo.vue'
import { mapState } from 'vuex'

export default {
    name:"LettleSay",
    components: {
        Bgimg,
        UserInfo,
    },
    sockets: {
        connect() {
            console.log('链接成功');
            this.$socket.emit('userFadeIn', {
                user: this.isLogin,
                status: "连接"
            })
        },
        disconnect() {
            console.log('断开链接')
        },
        reconnect() {   
            console.log('重新链接')
            this.$socket.emit('userFadeIn', {
                user: this.isLogin,
                status: "连接"
            })
        },
        chartMsg(data) {
            this.charts.push({
                id: data.user.uid,
                chartUser: {
                    name: data.user.nickname,
                    avatar: data.user.hdportrait
                },
                chartMsg: data.msg
            })
            // 保持聊天框滚动条在最底部
            this.$nextTick(() => {
                let chartWrap = this.$refs.chartWrap
                chartWrap.scrollTop = chartWrap.scrollHeight;
            })
        },
        users(data) {
            let status = data.currentUser.status == "在线" ? "进入" : "离开"
            this.$notify({
                title: "通知",
                message: '欢迎' + data.currentUser.user.nickname + status+'聊天室',
            })
            this.userQueue = data.userQueue
            this.userCount = data.userCount
        },
        userFadeOut(data) {
            this.$notify({
                title: "通知",
                message: data.fadeOutUser.user.nickname +'离开了聊天室'
            })
            this.userQueue = data.userQueue
            this.userCount = data.userCount
        }
    },
    data() {
        return {
            chartMsg: '',
            userCount: 0,
            charts: [],
            userQueue: []
        }
    },
    created() {
        this.$socket.connect()
        this.$socket.connected
    },
    mounted() {

    },
    updated() {
        
    },
    computed: {
        ...mapState(["isLogin"])
    },
    methods: {
        chartSend(e) {
            if(this.chartMsg === "") {
                return
            }
            // 将聊天信息传送服务器
            this.$socket.emit('chartMsg', {
                user: this.isLogin,
                msg: this.chartMsg
            })
            // 清空聊天框
            this.chartMsg = ''
        }
    },
    beforeUnmount() {
        // 取消所有订阅
        this.sockets.unsubscribe('connect')
        this.sockets.unsubscribe('reconnect')
        this.sockets.unsubscribe('users')
        this.sockets.unsubscribe('chartMsg')
        this.sockets.unsubscribe('userFadeOut')
        
        // 退出页面时候，关闭连接
        this.$socket.close()
        this.sockets.unsubscribe('disconnect')
    }
}
</script>

<style scoped>
.chart {
    flex: .7;
    display: flex;
    justify-content: space-between;
    height: 500px;
    border: 1px solid #ccc;
    background-color: rgba(255,255,255,.8);
    border-radius: 10px;
}
.chart .chart-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* background-color: rgb(116, 234, 255); */
    border-right: 1px solid #ccc;
}
.chart .chart-left .userInfo {
    position: static;
    background-color: transparent;
    box-shadow: none;
}
.chart .chart-left .userInfo  :deep(.userData) {
    display: none;
}
.chart .chart-left .userInfo :deep(.userContact) {
    display: none;
}
.chart .chart-right {
    flex: 3;
    display: flex;
    justify-content: space-between;
    flex-flow: column wrap;
}
.chart .chart-right .chart-top {
    border-bottom: 1px solid #ccc;
    padding: 20px;
}
.chart .chart-right .chart-top span:last-child {
    margin-left: 15px;
    font-size: 14px;
    color: #666;
}
.chart .chart-right .chart-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: auto;
}
.chart .chart-right .chart-wrap .chart-item {
    display: flex;
    margin: 15px 0;
}
/* 当前用户发消息显示在右侧 */
.chart .chart-right .chart-wrap .current-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chart .chart-right .chart-wrap .chart-item .chart-user-avatar {
    margin-right: 15px;
}
/* 当前用户发消息显示在右侧 */
.chart .chart-right .chart-wrap .current-user .chart-user-avatar {
    margin-right: 0;
    margin-left: 15px;
}
.chart .chart-right .chart-wrap .current-user .chart-user-msg {
    text-align: right;
}
.chart .chart-right .chart-wrap .current-user  .chart-user-name {
    text-align: right;
}
.chart .chart-right .chart-wrap .chart-item .chart-user-name {
    margin: 5px 0;
    color: #777;
}
.chart .chart-right .chart-send {
    position: relative;
    border-top: 1px solid #ccc;
}
.chart .chart-right .chart-send .chart-text textarea {
    display: block;
    width: 100%;
    height: 120px;
    font-size: 16px;
    font-family: tsxmm;
    padding: 5px 0 0 10px;
    resize: none;
    outline: none;
    border: none;
    border-bottom-right-radius: 10px;
}
.chart .chart-right .chart-send .chart-send-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.chart-list {
    flex: 1;
    padding: 15px;
    border-top: 1px solid #ccc;
    overflow: auto;
}
.chart-list .chart-list-item {
    display: flex;
    align-items: center;
    margin: 15px 0;
}
.chart-list .chart-list-item .chart-list-item-name {
    margin-left: 15px;
    font-size: 16px;
}
@media screen and (max-width:768px) {
    .chart {
        flex: .9;
    }
}
</style>